<!-- 运费管理 -->
<template>
  <div class="dashboard-container waybill-list customer-list-box">
    <el-card>
      <el-row>
        <el-button
          type="danger"
          class="add"
          @click="addforms"
        >新增模板</el-button>
      </el-row>
      <!-- 表格 -->
      <el-table
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          prop="templateType"
          label="模板类型"
          width="180"
        >
          <template v-slot="{ row }">
            <span v-if="row.templateType === 1">同城寄</span>
            <span v-else-if="row.templateType === 2">省内寄</span>
            <span v-else-if="row.templateType === 3">经济区互寄</span>
            <span v-else>跨省</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="transportType"
          label="运送类型"
          width="180"
        >
          <template v-slot="{ row }">
            <span v-if="row.transportType === 1">普快</span>
            <span v-else>特快</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="associatedCityList"
          width="180"
          label="关联城市"
        >
          <template v-slot="{ row }">
            <span>{{ list(row.associatedCityList) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="firstWeight"
          label="首重"
          width="170"
        >
        </el-table-column>
        <el-table-column
          prop="continuousWeight"
          label="续重"
          width="170"
        >
        </el-table-column>
        <el-table-column
          prop="lightThrowingCoefficient"
          label="轻抛系数"
          width="170"
        >
        </el-table-column>
        <el-table-column

          label="操作"
          width="180"
        >
          <template v-slot="{ row }">
            <el-button
              size="mini"
              type="text"
              style="margin-left: -103px"
              @click="editRows(row)"
            >编辑</el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button
              size="mini"
              type="text"
              style="color:red"
              @click="delRows(row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 添加弹框 -->
      <el-dialog
        :visible="showDialog"
        :title="showTitle"
        width="600px"
        @close="btnCancel"
      >
        <el-form
          ref="addform"
          style="margin-left: 50px;"
          :model="addform"
          :rules="rules"
        >
          <el-form-item
            label="模板类型"
            prop="templateType"
          >
            <el-select
              v-model="addform.templateType"
              placeholder="请选择模板类型"
              style="width:400px"
            >
              <el-option
                label="同城寄"
                :value="1"
              ></el-option>
              <el-option
                label="省内寄"
                :value="2"
              ></el-option>
              <el-option
                label="经济区互寄"
                :value="3"
              ></el-option>
              <el-option
                label="跨省"
                :value="4"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="运送类型"
            prop="transportType"
          >
            <el-select
              v-model="addform.transportType"
              placeholder="请选择运送类型"
              style="width:400px"
            >
              <el-option
                label="普快"
                :value="1"
              ></el-option>
              <el-option
                label="特快"
                :value="2"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="关联城市"
            prop="associatedCityList"
          >
            <el-checkbox-group v-model="addform.associatedCityList">
              <el-checkbox label="1">全国</el-checkbox>
              <el-checkbox
                :disabled="flag"
                label="2"
              >京津冀</el-checkbox>
              <el-checkbox
                :disabled="flag"
                label="3"
              >江浙沪</el-checkbox>
              <el-checkbox
                :disabled="flag"
                label="4"
              >川渝</el-checkbox>
              <el-checkbox
                :disabled="flag"
                label="5"
              >黑吉辽</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item
            label="首重价格"
            prop="firstWeight"
          >
            <el-input
              v-model.number="addform.firstWeight"
              placeholder="请输入首重价格"
              style="width:400px;"
            />
          </el-form-item>
          <el-form-item
            label="续重价格"
            prop="continuousWeight"
          >
            <el-input
              v-model.number="addform.continuousWeight"
              placeholder="请输入续重价格"
              style="width:400px;"
            />
          </el-form-item>
          <el-form-item
            label="轻抛系数"
            prop="lightThrowingCoefficient"
          >
            <el-input
              v-model.number="addform.lightThrowingCoefficient"
              style="width:400px;"
              placeholder="请输入轻抛系数"
            />
          </el-form-item>
        </el-form>
        <span
          slot="footer"
          class="dialog-footer"
          style="margin-right:38%;
    "
        >
          <el-button
            type="danger"
            @click="btnok"
          >确定</el-button>
          <el-button @click="btnCancel">取消</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import {
  freightManageOperate,
  freightManageList,
  freightManageDelete
} from '@/api/transit'
export default {
  data() {
    return {
      showDialog: false,
      showTitle: '',
      tableData: [], // 列表
      addform: {
        templateType: null, // 模板类型
        transportType: null, // 运送类型
        associatedCityList: [], // 关联城市
        firstWeight: null, // 首重价格
        continuousWeight: null, // 续重价格
        lightThrowingCoefficient: null // 轻抛系数
      },
      flag: false,
      rules: {
        templateType: [
          { required: true, message: '模板类型不能为空', trigger: 'blur' }
        ],
        transportType: [
          { required: true, message: '运送类型不能为空', trigger: 'blur' }
        ],

        firstWeight: [
          { required: true, message: '首重价格不能为空', trigger: 'blur' }
        ],
        continuousWeight: [
          { required: true, message: '续重价格不能为空', trigger: 'blur' }
        ],
        lightThrowingCoefficient: [
          { required: true, message: '轻抛系数不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    'addform.associatedCityList'() {
      const res = this.addform.associatedCityList.some((item) => {
        return item === '1'
      })
      this.flag = res
      if (res) {
        if ((this.addform.associatedCityList.join('') === '1') === false) {
          this.addform.associatedCityList = ['1']
        }
      }
    }
  },
  created() {
    this.random()
  },
  methods: {
    // 渲染列表
    async random() {
      const { data } = await freightManageList()
      this.tableData = data
    },
    async addforms() {
      this.showDialog = true
      this.showTitle = '新增模板'
    },
    // 添加数据
    btnok() {
      this.$refs.addform.validate(async isok => {
        if (isok) {
          this.showDialog = false
          // this.addform.associatedCityList =
          //   this.addform.associatedCityList instanceof Array
          //     ? this.addform.associatedCityList
          //     : this.lists(this.addform.associatedCityList)

          const res = await freightManageOperate(this.addform)
          console.log(res)
          if (res.code === 1) {
            this.$message.warning(res.msg)
          } else {
            if (this.showTitle === '新增模板') {
              this.$message.success('添加成功')
            } else {
              this.$message.success('编辑成功')
            }
          }
          this.btnCancel()
          this.random()
        }
      })
    },
    btnCancel() {
      // this.$refs.addform.resetFields()
      this.addform = {
        templateType: '', // 模板类型
        transportType: '', // 运送类型
        associatedCityList: [], // 关联城市
        firstWeight: '', // 首重价格
        continuousWeight: '', // 续重价格
        lightThrowingCoefficient: '' // 轻抛系数
      }
      this.showDialog = false
    },
    // 编辑回显数据
    async editRows(row) {
      this.showTitle = '编辑权限点'
      const res = await freightManageOperate(row)
      // res.data.associatedCityList = this.list(res.data.associatedCityList)
      console.log('res', res)
      this.addform = { ... res.data }
      this.showDialog = true
    },
    // 删除
    delRows(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          freightManageDelete(id)
          setTimeout(() => {
            this.random()
          }, 200)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    list(arr) {
      const result = arr.map(item => {
        if (item === '1') {
          return '全国'
        } else if (item === '2') {
          return '京津冀'
        } else if (item === '3') {
          return '江浙沪'
        } else if (item === '4') {
          return '川渝'
        } else {
          return '黑吉辽'
        }
      })
      return result.join('')
    }

  }
}
</script>

<style lang="scss" scoped rel="stylesheet/scss">
.waybill-list {
  .el-dialog__wrapper {
    /deep/ .el-dialog__body {
      padding-left: 0px;
    }
  }
}
/deep/.add {
  margin-top: 20px;
  margin-left: 1px;
  margin-bottom: 20px;
}
</style>
